<template>
  <div>
    <div>
      <el-select v-if="permis" v-model="resPage.data.operatorName" clearable placeholder="操作人" style="width: 150px">
        <el-option
          v-for="item in users"
          :key="item.id"
          :label="item.nickName"
          :value="item.nickName">
        </el-option>
      </el-select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-input v-model="resPage.data.userName" placeholder="用户名称" clearable style="width: 150px"></el-input> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-input
        v-model="resPage.data.descriptionInformation"
        placeholder="描述信息"
        clearable
        style="width: 150px"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-select v-model="resPage.data.type" clearable placeholder="金额类型">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <!--      <el-input v-model="resPage.data.type" placeholder="金额类型" clearable style="width: 150px"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->
      <el-date-picker
        v-model="resPage.data.startTime"
        timestamp
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button icon="el-icon-search" circle @click="search"></el-button>
      <el-button type="success" round size="mini" @click="create">新 增</el-button>
    </div>
    <br/>
    <el-table
      :data="page.data"
      stripe
      style="width: 100%">
      <el-table-column
        prop="userName"
        label="用户名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="descriptionInformation"
        label="描述信息"
        width="180">
      </el-table-column>
      <el-table-column
        prop="descriptivePicture"
        label="描述图片"
        width="180">
        <template scope="scope">
          <el-popover placement="top-start" trigger="click"> <!--trigger属性值：hover、click、focus 和 manual-->
            <a :href="scope.row.descriptivePicture" target="_blank" title="查看最大化图片">
              <img :src="scope.row.descriptivePicture" style="width: 480px;height: 350px">
            </a>
            <img slot="reference" :src="scope.row.descriptivePicture" style="width: 70px;height: 45px; cursor:pointer">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="transferOutAmount"
        label="金额"
        width="180">
      </el-table-column>
      <el-table-column
        prop="userPhone"
        label="用户电话"
        width="180">
      </el-table-column>
      <el-table-column
        prop="operatorName"
        label="操作人"
        width="180">
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="操作时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="type"
        label="金额类型"
        width="100">
        <template scope="scope">
          <div>
            {{ scope.row.type === 1 ? '转出' : '转入' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">

        <template slot-scope="scope">
          <el-button type="primary" round size="mini" @click="edit(scope.row)">编 辑</el-button>
          <el-button type="danger" round size="mini" @click="deleted(scope.row)">删 除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br/>
    <div class="block" style="text-align: right">
      <el-pagination
        background
        :page-size="page.size"
        :page-sizes="[5, 10, 20, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalCount"
        :current-page="page.index"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form ref="form" :model="resData" label-width="80px">
        <el-form-item v-if="showEl" label="操作人">
          <div>{{ resData.operatorName }}</div>
        </el-form-item>
        <el-form-item label="用户名称">
          <el-input v-model="resData.userName"></el-input>
        </el-form-item>
        <el-form-item label="描述信息">
          <el-input v-model="resData.descriptionInformation"></el-input>
        </el-form-item>
        <el-form-item label="描述图片">
          <el-upload
            class="upload-demo"
            action="http://139.9.59.162:8881/file/upload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="success"
            :limit="1"
            :file-list="fileList"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="金额">
          <el-input v-model="resData.transferOutAmount"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="resData.userPhone"></el-input>
        </el-form-item>
        <el-form-item label="金额类型">
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="转 入"
            inactive-text="转 出">
          </el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">{{ title }}</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import { create, deleted, edit, page } from '@/api/table'
import { userList } from '@/api/account'
import { deleteFile } from '@/api/file'

export default {
  name: 'Index',
  data() {
    return {
      permis: true,
      deletedDTO: {},
      fileList: [{
        name: 'food.jpeg',
        url: ''
      }],
      options: [{
        value: 0,
        label: '转入'
      }, {
        value: 1,
        label: '转出'
      }],
      showEl: false,
      value: true,
      resData: {},
      title: '',
      dialogVisible: false,
      users: [],
      page: [],
      resPage: {
        data: {
          startTime: null
        },
        index: 1,
        size: 5
      }
    }
  },
  created() {
    this.list()
    this.permis = localStorage.getItem('permis') === 'admin'
    this.userList()
  },
  methods: {
    list() {
      page(this.resPage).then(res => {
        if (res.code === 200) {
          this.page = res.data
        }
      })
    },
    cancel() {
      this.list()
      this.dialogVisible = false
    },
    // eslint-disable-next-line vue/no-dupe-keys
    userList() {
      userList().then(res => {
        if (res.code === 200) {
          this.users = res.data
        }
      })
    },
    edit(row) {
      this.resData = row
      this.fileList[0].url = row.descriptivePicture
      this.value = row.type === 0
      this.showEl = true
      this.title = '编 辑'
      this.dialogVisible = true
    },
    deleted(row) {
      this.$confirm('此操作将永久删除该账号, 是否继续?', '删 除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleted(row.id).then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功')
            this.resPage.index = 1
            this.list()
          } else {
            this.$message.error('删除失败')
          }
        })
      }).catch(() => {
        this.$message.info('取消删除')
      })
    },
    onSubmit() {
      this.resData.type = this.value === true ? 0 : 1
      if (this.resData.id == null) {
        console.log('新增')
        create(this.resData).then(res => {
          if (res.code === 200) {
            this.$message.success(this.title + '成功')
            this.list()
            this.dialogVisible = false
          } else {
            this.$message.error(this.title + '失败')
            this.dialogVisible = false
          }
        })
      } else {
        console.log('编辑')
        edit(this.resData).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.$message.success(this.title + '成功')
            this.list()
            this.dialogVisible = false
          } else {
            this.$message.error(this.title + '失败')
            this.dialogVisible = false
          }
        })
      }
    },
    search() {
      if (this.resPage.data.startTime !== null) {
        this.resPage.data.endTime = this.resPage.data.startTime[1]
        this.resPage.data.startTime = this.resPage.data.startTime[0]
      }
      this.list()
    },
    create() {
      this.fileList[0].url = null
      this.title = '新 增'
      this.resData = {}
      this.dialogVisible = true
    },
    handleCurrentChange(val) {
      this.resPage.index = val
      this.list()
    },
    handleSizeChange(val) {
      this.resPage.size = val
      this.list()
    },
    handleRemove(file) {
      this.deletedDTO = {
        id: this.resData.id,
        imgUrl: file.url,
        type: 1
      }
      if (file.url !== null) {
        deleteFile(this.deletedDTO).then(res => {
          if (res.code === 200) {
            this.$message.success('操作成功')
          }
        })
      }
    },
    handlePreview(file) {
      if (file.url !== null) {
        window.location.href = file.url
      }
    },
    success(response) {
      console.log(response)
      this.resData.descriptivePicture = response.msg
    }
  }
}
</script>

<style scoped>

</style>
